<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        #boxNav {
            height: 100%;
            width: 40px;
            background: #fff;
            position: fixed;
            right: 0;
            top:0%;
            opacity: 0.8;
            z-index: 999;
        }

        #boxNav img {
            width: 40px;
            height: 40px;
        }

        #boxNav #boxOne {
            position: absolute;
            top: 100px;
        }

        #boxNav #boxTwo {
            position: absolute;
            top: 140px;
        }

        #boxNav #boxThree {
            position: absolute;
            top: 180px;
        }

        #boxNav #boxFour {
            position: absolute;
            top: 220px;
        }
        #boxNav #boxFour .QR{
            width: 200px;
            height: 200px;
            position: absolute;
            left: -200px;
            top: -50px;
            display: none;
        }
        #boxNav #boxFive {
            position: absolute;
            top: 260px;
        }

        #boxNav .appear {
            display: none;
            position: absolute;
            top: 0;
            width: 40px;
            height: 40px;
            background: #AE0505;
        }
        #boxOne:hover .boxOnea {
            display: block;
        }

        #boxTwo:hover .boxTwoa {
            display: block;
        }

        #boxThree:hover .boxThreea {
            display: block;
        }

        #boxFour:hover .boxFoura{
            display: block;
        }

        #boxFive:hover .boxFivea {
            display: block;
        }
        .erwei{
            background: url(https://activity.dapuimg.com/E1FC6677-E584-44f4-BE87-9359ACFA1A04.png);
    width: 200px;
    height: 200px;
    background-size: 200px;
    position: absolute;
    top: -50px;
    right: 45px;
    opacity: 0.8;
    
        }
        #boxFour{
            position: relative;
        }
    </style>
</head>

<body>
    <div id="boxNav">
        <!-- 第一个图标首页 -->
        <div id="boxOne">
            <img src="http://activity.dapuimg.com/dapu_201510150001-home.png" alt="">
            <div class="boxOnea appear">
                <a href="" style="font-size:14px;line-height: 40px; color: #fff; text-decoration: none;">&nbsp;首&nbsp;页</a>
            </div>
        </div>
        <!-- 第二个图标我的订单 -->
        <div class="boxOnea appear"></div>
        <div id="boxTwo">
            <img src="http://activity.dapuimg.com/dapu_201510150001-member.png" alt="">
            <div class="boxTwoa appear">
                <a href="" style="font-size:14px;  color: #fff; text-decoration: none;" >&nbsp;我&nbsp;的<br />&nbsp;订&nbsp;单</a>
            </div>
        </div>
        <!-- 第三个图标购物车 -->
        <div class="boxTwoa appear"></div>
        <div id="boxThree">
            <img src="http://activity.dapuimg.com/dapu_201510150001-cart.png" alt="">
            <div class="boxThreea appear">
                <a href="" style="font-size:13px;line-height: 40px; color: #fff; text-decoration: none;">购物车</a>
            </div>
        </div>
        <!-- 第四个图标客服 -->
        <div class="boxThreea appear"></div>
        <div id="boxFour">
            <img src="http://activity.dapuimg.com/dapu_20161013_huiyuan.png" alt="">
            <div class="boxFoura appear">
                <div class="erwei"></div>
                <a href="" style="font-size:14px;line-height: 40px; color: #fff; text-decoration: none;">&nbsp;客&nbsp;服</a>
            </div>
        </div>
        <!-- 第五个图标返回顶部 -->
        <div id="boxFive">
            <img src="http://activity.dapuimg.com/dapu_201510150001-top.png" alt="">
            <div class="boxFivea appear box">
                
                <a href="" style="font-size:14px; color: #fff; text-decoration: none;">&nbsp;返&nbsp;回<br />&nbsp;顶&nbsp;部</a>
            </div>
        </div>

    </div>
    <div style="background: red;height: 1800px;width: 1200px;">

    </div>
    <!--        script  返回顶部        -->
    
  <script>
    var timer
    box.onclick = function () {
      clearInterval(timer)
      timer = setInterval(function () {
        document.documentElement.scrollTop -= 10

        if (document.documentElement.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 200)
    }
  </script>
</body>

</html>